<template>
  <div>
    <el-container>
      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409eff"
            router
        >
          <div class="logo">
            <router-link to="/">
              <img src="../../assets/imgs/logo.png" alt/>
            </router-link>
          </div>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/allProject">全部项目</el-menu-item>
          <el-menu-item index="/myData">我的</el-menu-item>

          <!--          <div class="so">-->
          <!--            <el-input placeholder="请输入搜索内容" v-model="search">-->
          <!--              <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>-->
          <!--            </el-input>-->
          <!--          </div>-->
          <div class="message-box" v-if="this.$store.getters.getUser.role === 'student'">
            <el-button @click="toMyMessage">我的消息</el-button>
          </div>
        </el-menu>
      </el-header>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "HeaderBar",
  components: {},
  data() {
    return {
      activeIndex: "", // 头部导航栏选中的标签
      search: "", // 搜索条件
      showMessage: false
    }
  },
  mounted() {
  },
  methods: {
    toMyMessage() {
      this.showMessage = true
      this.$router.push({
        path: "/myMessage", query: {
          userId: this.$store.getters.getUser.id
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/index.css";
/* 顶栏容器CSS */
.el-header .el-menu {
  width: 100%;
  max-width: 1225px;
  margin: 0 auto;
}

.el-header .logo {
  height: 60px;
  width: 189px;
  float: left;
  margin-right: 100px;
}

.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}

.message-box {
  margin-top: 10px;
  margin-right: 20px;
  float: right;
}

/* 顶栏容器CSS END */
</style>